<!--
 * @Author: 陈俊升 761723995@qq.com
 * @Date: 2023-05-11 08:47:22
 * @LastEditors: 陈俊升 761723995@qq.com
 * @LastEditTime: 2024-02-20 09:23:33
 * @FilePath: /hr_new_vue3/src/views/Management/Organization/OrganizationManagement/Structure/HistoricalSnapshot/index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!-- 查看历史快照 -->
<template>
  <ContentCard>
    <template #header>
      <PageHeaderNew :title="title" :showBack="true"> </PageHeaderNew>
    </template>
    <ConditionBox :margin-bottom="20">
      <template #left>
        <a-range-picker
          @change="timeChange"
          @clear="timeClear"
          v-model="timeSearch"
          style="width: 254px"
          value-format="YYYY-MM-DD"
          allow-clear
        />
      </template>
      <template #right>
        <a-button type="outline" @click="del(null)" status="danger"
          >批量删除</a-button
        >
      </template>
    </ConditionBox>
    <TableTurn :tableData="getTableData" :args="args" ref="tableRef">
      <a-table-column :width="80" align="center">
        <template #title>
          <span>序号</span>
        </template>
        <template #cell="{ rowIndex }">
          {{ rowIndex + 1 }}
        </template>
      </a-table-column>
      <a-table-column
        align="center"
        :width="200"
        dataIndex="createdAt"
        title="归档时间"
      >
        <template #cell="{ record }">
          {{ dayjs(record.createdAt).format('YYYY-MM-DD HH:mm') }}
        </template>
      </a-table-column>
      <a-table-column
        align="center"
        :width="200"
        dataIndex="name"
        title="归档人"
      >
        <template #cell="{ record }">
          {{ humanList.find((el: any) => el.id === record.createBy)?.name }}
        </template>
      </a-table-column>
      <!-- <a-table-column align="center" :width="200" dataIndex="" title="归档状态">
      </a-table-column> -->
      <a-table-column :width="100" fixed="right" title="操作">
        <template #cell="{ record }">
          <a-tooltip content="详情">
            <icon-font
              type="icon-details-def"
              :size="26"
              :style="{
                cursor: 'pointer'
              }"
              @click="goDetail(record.id)"
            />
          </a-tooltip>
          <a-tooltip content="删除" position="left">
            <a-popconfirm content="是否确认删除该条数据?" @ok="del(record.id)">
              <icon-font
                type="icon-delete"
                :size="26"
                :style="{
                  cursor: 'pointer'
                }"
              />
            </a-popconfirm>
          </a-tooltip>
        </template>
      </a-table-column>
    </TableTurn>
  </ContentCard>
</template>

<script lang="ts" setup>
import dayjs from 'dayjs';
import {
  GetSnapShotList,
  DelSnapShotList
} from '@/apis/management/organization/organizationManagement';
import { Modal, Message } from '@arco-design/web-vue';
import { getAllHumanRoster } from '@/utils/common';

const router = useRouter();
const route = useRoute();

const title = '历史快照记录';

// 表格配置
const args = reactive({
  rowSelection: {
    type: 'checkbox',
    showCheckedAll: true,
    onlyCurrent: false
  }
});

let timeSearch = ref([]);
let tableRef = ref([]);
/* 储存选择的数据 */
const selectedList = computed(() => tableRef.value.selectedList);
// 获取表格数据
const getTableData = async (pageData: any) => {
  try {
    const res = await GetSnapShotList({
      ...pageData,
      time: timeSearch.value.join(',')
    });
    return Promise.resolve(res);
  } catch (error: unknown) {
    console.log(error);
  }
};

let humanList = ref([]); // 储存人员列表
const getData = async () => {
  humanList.value = await getAllHumanRoster();
};
getData();
const timeChange = (
  value: Date | string | number,
  date: Date,
  dateString: string
) => {
  refresh();
};

const timeClear = () => {
  timeSearch.value = [];
};

const goDetail = (id: number) => {
  router.push({
    name: 'HistoricalSnapshotDetail',
    params: {
      id
    },
    query: {
      tab: route.query.tab
    }
  });
};

const del = async (id: number | null) => {
  try {
    if (!id) {
      if (selectedList.value.length === 0) {
        Message.error('请至少选择一项！');
      } else {
        Modal.confirm({
          title: '提示',
          content: '确定要删除选中的数据吗？',
          onOk: async () => {
            try {
              await DelSnapShotList({
                ids: selectedList.value
              });
              tableRef.value.selectedList = [];
              refresh();
            } catch (error: unknown) {
              console.log(error);
            }
          }
        });
      }
    } else {
      await DelSnapShotList({
        ids: [id]
      });
      tableRef.value.selectedList = [];
      refresh();
    }
  } catch (error: unknown) {
    console.log(error);
  }
};
const refresh = (pageData?: any) => {
  if (pageData) tableRef.value.loadData(pageData);
  else tableRef.value.loadData();
};
</script>

<style lang="less" scoped>
.container {
  padding: 10px 20px;
}
</style>
